<template>
  <div class="model-content" :class="{ 'model-title-com-dark': dark }">
    <modelTitle :title="'气化科指标'" />
    <div class="top_title">
      <div class="top_title1">
        <div class="title_left" />
        <div style="font-size: 14px">大宗气系统</div>
        <div class="title_right" />
      </div>
      <div class="top_title2">
        <div class="title_left" />
        <div style="font-size: 14px">化学系统</div>
        <div class="title_right" />
      </div>
    </div>
    <div class="model_chart">
      <div class="otherdiv one" @click="showSpc('CDA压力')">
        <p class="otherdiv-title">CDA压力</p>
        <p class="otherdiv-num">
          {{ gasdatafiltervalue("CDA压力") }}<span>{{ gasdatafilterunit("CDA压力") }}</span>
        </p>
      </div>
      <div class="otherdiv two" @click="showSpc('CDA品质')">
        <p class="otherdiv-title">CDA品质</p>
        <p class="otherdiv-num">
          {{ gasdatafiltervalue("CDA品质") }}<span>{{ gasdatafilterunit("CDA品质") }}</span>
        </p>
      </div>
      <div class="otherdiv three" @click="showSpc('HF100:1浓度')">
        <p class="otherdiv-title">HF100:1浓度</p>
        <p class="otherdiv-num">
          {{ gasdatafiltervalue("HF100:1浓度") }}<span>{{ gasdatafilterunit("HF100:1浓度") }}</span>
        </p>
      </div>
      <div class="otherdiv four" @click="showSpc('DEV2.37%浓度')">
        <p class="otherdiv-title">DEV2.37%浓度</p>
        <p class="otherdiv-num">
          {{ gasdatafiltervalue("DEV2.37%浓度") }}<span>{{ gasdatafilterunit("DEV2.37%浓度") }}</span>
        </p>
      </div>
      <div class="otherdiv five" @click="showSpc('WCP-200浓度')">
        <p class="otherdiv-title">WCP-200浓度</p>
        <p class="otherdiv-num">
          {{ gasdatafiltervalue("WCP-200浓度") }}<span>{{ gasdatafilterunit("WCP-200浓度") }}</span>
        </p>
      </div>
    </div>

    <px-dialog v-model="analyzevisual" title="SPC指标" width="1431" style="height: 95%" align-center>
      <spcAnalyzePosition :spcUnit="spcUnit" :spcJob="spcJob" style="height: 100%" />
    </px-dialog>
  </div>
</template>

<script lang="ts" setup>
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import spcAnalyzePosition from "@/views/water/spc/spcsearch/spcAnalyzePosition.vue";
import { dashboardqueryOtherDeptIndicator } from "@/api/machineApi";
import { useRouter } from "vue-router";
import { ref, reactive, toRefs, onMounted } from "vue";

interface Props {
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否暗色，默认为false */
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  dark: false,
  width: 330,
  height: 200
});

const state = reactive({
  totalDay: {
    alarmStat: { total: 0, done: 0, undone: 0 },
    callInWorkOrder: { total: 0, done: 0, undone: 0 },
    deviceStatusStat: { normal: 0, warn: 0, standby: 0, fault: 0 },
    inspectionTasks: { total: 0, done: 0, undone: 0 },
    maintenanceTasks: { total: 0, done: 0, undone: 0 },
    pmTasks: { total: 0, done: 0, undone: 0 },
    safetyHazardTasks: { total: 0, done: 0, undone: 0 },
    totalStat: { total: 0, done: 0 }
  },
  tableData: [],
  autoplay: false,
  eledata: [],
  gasdata: [],
  waterdata: [],
  spcJob: [
    {
      jobId: "",
      indicatorName: ""
    }
  ]
});
const { spcJob, eledata, gasdata, waterdata, totalDay, tableData, autoplay } = toRefs(state);
onMounted(() => {
  dashboardqueryOtherDeptIndicator({}).then((res: any) => {
    console.log(res);
    eledata.value = res.ele;
    gasdata.value = res.gas;
    waterdata.value = res.water;
  });
});
const analyzevisual = ref(false);
const spcUnit = ref("");
const showSpc = type => {
  analyzevisual.value = true;
  const typevalue = gasdata.value.filter(item => item.name == type)[0];
  spcUnit.value = typevalue.unit;
  spcJob.value = [
    {
      jobId: typevalue.pointPosition,
      indicatorName: typevalue.name
    }
  ];
};
const gasdatafiltervalue = type => {
  if (gasdata.value && gasdata.value.length > 0) {
    const typevalue = gasdata.value.filter(item => item.name == type);
    return typevalue[0] && typevalue[0].value != null ? typevalue[0].value : "-";
  } else {
    return "-";
  }
};
const gasdatafilterunit = type => {
  if (gasdata.value && gasdata.value.length > 0) {
    const typevalue = gasdata.value.filter(item => item.name == type);
    return typevalue[0] && typevalue[0].unit != null ? typevalue[0].unit : "-";
  } else {
    return "-";
  }
};
</script>
<style scoped lang="scss">
.model-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;

  .main_chart_dom {
    height: 286px;
    margin-top: 16px;
  }

  .top_title {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
    justify-content: space-between;
    width: 100%;

    .top_title1 {
      display: flex;
      flex-flow: row nowrap;
      gap: 16px;
      justify-content: center;
      width: 40%;
    }

    .top_title2 {
      display: flex;
      flex-flow: row nowrap;
      gap: 16px;
      justify-content: center;
      width: 60%;
    }

    .title_left {
      flex: 1;
      background-image: url("@/assets/images/machine/left_line.png");
      background-repeat: no-repeat;
      background-position: right 0 bottom 11px;
      background-origin: content-box;
    }

    .title_right {
      flex: 1;
      background-image: url("@/assets/images/machine/right_line.png");
      background-repeat: no-repeat;
      background-position: left 0 bottom 11px;
      background-origin: content-box;
    }
  }

  .model_chart {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
    width: 100%;
    height: calc(100% - 85px);
  }

  .torouter {
    position: absolute;
    top: 24px;
    right: 20px;
    cursor: pointer;
  }

  .otherdiv {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-height: 117px;
    padding: 16px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 0 bottom 0;
    background-origin: content-box;
    border-radius: 4px;
  }

  .one {
    background-color: #eff6ff;
    background-image: url("@/assets/svg/machine/blur_pa.svg");
  }

  .two {
    background-color: #eff6ff;
    background-image: url("@/assets/svg/machine/blur_zuan.svg");
  }

  .three {
    background-color: #ebecff;
    background-image: url("@/assets/svg/machine/purplr_water.svg");
  }

  .four {
    background-color: #ebecff;
    background-image: url("@/assets/svg/machine/purplr_water.svg");
  }

  .five {
    background-color: #ebecff;
    background-image: url("@/assets/svg/machine/purplr_water.svg");
  }

  .othercolor2 {
    background: #fff5e5;
  }

  .othercolor3 {
    background: #e6fbf8;
  }

  .otherdiv-title {
    width: 128px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #000;
  }

  .otherdiv-icon {
    width: 47px;
    height: 53px;
  }

  .iconwidth {
    width: 48px;
    height: 43px;
  }

  .otherdiv-num {
    font-size: 24px;
    font-weight: 600;
    line-height: 33px;
    color: #3b82f6;

    span {
      font-size: 16px;
    }
  }

  .othernumcolor2 {
    color: #f59e0b;
  }

  .othernumcolor3 {
    color: #12b981;
  }

  :deep(.px-col-9) {
    flex: 0 0 11.1111%;
    max-width: 11.1111%;
  }
}

.model-title-com-dark {
  color: #fff;
  background-color: #001e3b;
  border: 1px solid #83b2ff;
  box-shadow: inset 0 0 10px 0 #83b2ff;

  .title-text {
    color: #fff;
  }

  :deep(.model-title-com) {
    border-color: #00c2ff !important;
  }

  .one {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_blur_pa.svg") !important;
  }

  .two {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_blur_zuan.svg") !important;
  }

  .three {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_purplr_water.svg") !important;
  }

  .four {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_purplr_water.svg") !important;
  }

  .five {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_purplr_water.svg") !important;
  }

  .otherdiv-title {
    color: #fff !important;
  }

  .otherdiv-num {
    color: #00c2ff !important;
  }
}
</style>
